<template>
  <div class="minimap-panel" :class="{ collapsed, fullscreen }">
    <!-- <div class="minimap-header" @click="toggleCollapse">
      <span>导航窗口</span>
      <div class="header-buttons">
        <px-button 
          class="header-button fullscreen-toggle" 
          type="text" 
          @click.stop="toggleFullscreen"
          :icon="fullscreen ? 'px-icon-close' : 'px-icon-full-screen'"
          :title="fullscreen ? '退出全屏' : '全屏'"
        />
        <px-button 
          class="header-button minimap-toggle" 
          type="text" 
          @click.stop="toggleCollapse"
          :icon="collapsed ? 'px-icon-arrow-right' : 'px-icon-arrow-left'"
          :title="collapsed ? '展开' : '收起'"
        />
      </div>
    </div> -->
    <div class="minimap-content">
      <div ref="container" class="minimap-container" @mousedown="startDrag" @mouseenter="setGrabCursor" @mouseleave="resetCursor">
        <img
          ref="imageRef"
          :style="{ top: !showCharts ? 0 : '', left: !showCharts ? '-166px' : '' }"
          :src="imageSrc"
          class="minimap-image"
          alt="缩略图"
          @load="handleImageLoad"
        />
        <div class="marker-container" :style="{ top: !showCharts ? 0 : 0, left: !showCharts ? '-158px' : 0 }">
          <!-- <div 
            v-for="(marker, index) in markers" 
            :key="index"
            class="minimap-marker"
            :style="{
              left: `${marker.x}px`,
              top: `${marker.y}px`,
              borderColor: marker.color,
              color: marker.color
            }"
          >
            {{ marker.text }}
          </div> -->
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, onBeforeUnmount } from "vue";

const props = defineProps({
  imageSrc: {
    type: String,
    required: true
  },
  // 添加强制尺寸控制参数
  width: {
    type: [Number, String],
    default: "100%"
  },
  height: {
    type: [Number, String],
    default: "auto"
  },
  showCharts: {
    type: Boolean,
    default: false
  },
  linesOptions: {
    type: Object,
    default: () => {}
  },
  markers: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(["toggle-fullscreen"]);

const container = ref<HTMLElement | null>(null);
const collapsed = ref(false);
const fullscreen = ref(false);
let isDragging = false;
let startX = 0;
let startY = 0;
let scrollLeft = 0;
let scrollTop = 0;

const imageRef = ref<HTMLImageElement | null>(null);
const isLoaded = ref(false);

// 计算图片样式
const computedImageStyle = computed(() => {
  const style: Record<string, string> = {
    position: "absolute",
    top: "0",
    left: "0",
    "user-select": "none",
    "-webkit-user-drag": "none",
    "z-index": "1"
  };

  // 处理宽度设置
  if (typeof props.width === "number") {
    style.width = `${props.width}px`;
  } else {
    style.width = props.width;
  }

  // 处理高度设置
  if (typeof props.height === "number") {
    style.height = `${props.height}px`;
  } else {
    style.height = props.height;
  }

  // 加载完成后添加过渡效果
  if (isLoaded.value) {
    style.transition = "width 0.3s ease, height 0.3s ease";
  }

  return style;
});

// 图片加载处理
const handleImageLoad = () => {
  if (imageRef.value) {
    isLoaded.value = true;
    // 强制应用新尺寸
    applyImageSize();
  }
};

// 应用图片尺寸
const applyImageSize = () => {
  if (!imageRef.value) return;

  const img = imageRef.value;
  if (typeof props.width === "number") {
    img.style.width = `${props.width}px`;
  }
  if (typeof props.height === "number") {
    img.style.height = `${props.height}px`;
  }
};

// 监听props变化
watch(
  () => [props.width, props.height],
  () => {
    applyImageSize();
  }
);

onMounted(() => {
  // 如果图片已经加载完成
  if (imageRef.value?.complete) {
    handleImageLoad();
  }
});

// 初始化拖动
const initDrag = () => {
  if (!container.value) return;

  const handleMouseDown = (e: MouseEvent) => {
    if (e.button !== 0 || !props.showCharts) return;

    isDragging = true;
    container.value!.style.cursor = "grabbing";

    startX = e.pageX;
    startY = e.pageY;
    scrollLeft = container.value!.scrollLeft;
    scrollTop = container.value!.scrollTop;

    e.preventDefault();
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging || !props.showCharts) return;

    e.preventDefault();

    const dx = e.pageX - startX;
    const dy = e.pageY - startY;

    container.value!.scrollLeft = scrollLeft - dx;
    container.value!.scrollTop = scrollTop - dy;
  };

  const handleMouseUp = () => {
    if (!isDragging || !props.showCharts) return;

    isDragging = false;
    container.value!.style.cursor = "grab";
  };

  container.value.addEventListener("mousedown", handleMouseDown);
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);

  return () => {
    container.value?.removeEventListener("mousedown", handleMouseDown);
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  };
};

// 设置光标样式
const setGrabCursor = () => {
  if (container.value && !isDragging) {
    container.value.style.cursor = "grab";
  }
};

const resetCursor = () => {
  if (container.value) {
    container.value.style.cursor = "grab";
    isDragging = false;
  }
};

// 开始拖动
const startDrag = (e: MouseEvent) => {
  if (e.button !== 0) return;

  isDragging = true;
  if (container.value) {
    container.value.style.cursor = "grabbing";
  }

  startX = e.pageX;
  startY = e.pageY;
  scrollLeft = container.value?.scrollLeft || 0;
  scrollTop = container.value?.scrollTop || 0;

  e.preventDefault();
};

// 切换折叠状态
const toggleCollapse = () => {
  collapsed.value = !collapsed.value;
};

// 切换全屏
const toggleFullscreen = (e: MouseEvent) => {
  e.stopPropagation();
  fullscreen.value = !fullscreen.value;
  emit("toggle-fullscreen", fullscreen.value);
};

// 初始化
onMounted(() => {
  const cleanup = initDrag();

  // 设置初始滚动位置
  if (container.value) {
    container.value.scrollLeft = 900 - container.value.clientWidth / 2;
    container.value.scrollTop = 350 - container.value.clientHeight / 2;
  }

  onBeforeUnmount(() => {
    cleanup && cleanup();
  });
});
</script>

<style scoped>
.minimap-panel {
  /* position: relative; */

  /* left: 0; */

  /* top: 50%; */

  /* transform: translateY(-50%); */
  z-index: 3;
  width: 100%;
  backdrop-filter: blur(5px);
  border: 1px solid #ccc;

  /* background: rgba(255, 255, 255, 0.95); */

  /* border-radius: 0 4px 4px 0; */

  /* box-shadow: 2px 0 6px rgba(0,0,0,0.1); */

  /* width: auto; */
  transition: all 0.3s ease;
}

.minimap-panel.collapsed {
  transform: translateX(-400px) translateY(-50%);
}

.minimap-panel.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: rgb(255 255 255 / 95%);
  border-radius: 0;
  transform: none;
}

.minimap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 8px 12px;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, #346187, #4a7ca3);
  border-bottom: 1px solid #ccc;
  border-radius: 0 4px 0 0;
}

.header-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  font-size: 16px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.header-button:hover {
  background-color: rgb(255 255 255 / 20%);
}

.minimap-content {
  width: 100%;
  overflow: hidden;
  transition: none;
}

.minimap-panel.fullscreen .minimap-content {
  width: 100%;
}

.minimap-container {
  position: relative;
  width: 100%;
  min-width: 500px;
  height: 500px;
  overflow: auto;
  cursor: grab;
  background: white;

  /* 隐藏标准浏览器滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* WebKit浏览器滚动条隐藏 */
.minimap-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.minimap-panel.fullscreen .minimap-container {
  width: 100%;
  height: calc(100vh - 40px);
  background: white;
}

.minimap-image {
  all: initial;
  position: absolute;

  /* top: 0;
  left: 0; */
  z-index: 1;
  display: block;
  pointer-events: auto;
  cursor: inherit;

  /* width: 2000px;
  height: auto; */
  user-select: none;
  -webkit-user-drag: none;
}

.minimap-panel.fullscreen .minimap-image {
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
}

.marker-container {
  position: absolute;

  /* top: 0; */

  /* left: 0; */

  /* pointer-events: none; */
  z-index: 2;
  width: 1820px;
  height: 500px;
}

.minimap-marker {
  position: absolute;
  z-index: 1000;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  background-color: rgb(255 255 255 / 90%);
  border: 2px solid;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  transform: translate(-50%, -50%);
}

/* 滚动条样式 */

/* .minimap-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
} */

.minimap-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.minimap-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.minimap-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
